<template>
  <view class="campus-container">
    <!-- 顶部：学号和姓名 -->
    <view class="user-info">
      <text>学号：2023001234</text>
      <text>姓名：张三</text>
    </view>
    
    <!-- 校园Logo -->
    <view class="logo-container">
      <image 
        src="/static/school-logo.png" 
        mode="aspectFit" 
        class="school-logo"
        alt="校徽"
      ></image>
    </view>
    
    <!-- 校园风光 -->
    <view class="scenery-container">
      <image 
        src="/static/school-scenery.jpg" 
        mode="widthFix" 
        class="school-scenery"
        alt="校园风光"
      ></image>
    </view>
    
    <!-- 校园定位地图 -->
    <view class="map-container">
      <map
        class="school-map"
        longitude="116.327055"  <!-- 清华大学经纬度（示例），请替换为你的学校坐标 -->
        latitude="40.003064"
        scale="16"
        show-location
      >
        <!-- 地图标记点 -->
        <cover-view slot="markers">
          <map-marker
            id="1"
            longitude="116.327055"
            latitude="40.003064"
            title="张三"  <!-- 替换为你的姓名 -->
            icon-path="/static/marker.png"  <!-- 可选：自定义标记图标 -->
            width="30"
            height="30"
          ></map-marker>
        </cover-view>
      </map>
    </view>
  </view>
</template>

<script>
export default {
  name: 'campus',
  data() {
    return {}
  }
}
</script>

<style scoped>
.campus-container {
  padding: 20rpx;
  background-color: #f5f5f5;
}

/* 用户信息样式 */
.user-info {
  display: flex;
  justify-content: space-between;
  margin-bottom: 30rpx;
  font-size: 28rpx;
  color: #333;
}

/* Logo容器样式 */
.logo-container {
  display: flex;
  justify-content: center;
  margin-bottom: 30rpx;
  height: 200rpx;  /* 固定容器高度，aspectFit会保持比例 */
}

.school-logo {
  width: 180rpx;
  height: 100%;
}

/* 校园风光样式 */
.scenery-container {
  margin-bottom: 30rpx;
}

.school-scenery {
  width: 100%;  /* 宽度100%，height会自适应 */
}

/* 地图容器样式 */
.map-container {
  height: 400rpx;
  border-radius: 16rpx;
  overflow: hidden;
}

.school-map {
  width: 100%;
  height: 100%;
}
</style>